<template>
    <div class="app-container dialog-w80">

        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange"
                        border>
                        查看已删门店
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right"
                        unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id" @change="storeChange"
                        style="width:160px">
                        <el-option v-for="item in store_list" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select placeholder="选择入库方式" v-model="formInline.type" style="width:160px" @change="inOutChange">
                        <el-option label="店内仓调拨" value="1"></el-option>
                        <el-option label="店外仓调拨" value="2"></el-option>
                        <el-option label="跨平台调拨" value="3"></el-option>
                    </el-select>
                    <el-select v-if="formInline.type==3" v-model="formInline.kua_type" filterable style="width:160px">
                        <el-option v-for="item in type_list" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-if="formInline.type==1" placeholder="选择" v-model="formInline.house_id"
                        style="width:160px">
                        <el-option v-for="item in houseList" :key="item.house_id" :label="item.house_name"
                            :value="item.house_id"></el-option>
                    </el-select>

                    <el-select v-if="formInline.type==2" placeholder="选择" v-model="formInline.from" style="width:120px">
                        <el-option label="其他仓调入" value="1"></el-option>
                        <el-option label="本店仓调出" value="2"></el-option>
                    </el-select>
                    <el-input v-if="formInline.type==2" v-model="formInline.order_no" placeholder="请输入订单号"
                        style="width:120px"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <transition name="fade" mode="out-in">
                <!-- 表格 -->
                <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="mini"
                    @selection-change="handleSelectionChange" :key="formInline.type">
                    <el-table-column type="selection" width="36"></el-table-column>
                    <el-table-column align="center" label='序号' width="50">
                        <template slot-scope="scope">
                            <span class="indexColor">{{scope.$index+1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="订单状态" v-if="formInline.type==3">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status==1">待神采审核</span>
                            <span v-if="scope.row.status==2">待平台确认</span>
                            <span v-if="scope.row.status==3">审核关闭</span>
                            <span v-if="scope.row.status==4">出库关闭</span>
                            <span v-if="scope.row.status==5">待发货</span>
                            <span v-if="scope.row.status==6">已发货</span>
                            <span v-if="scope.row.status==8">部分收货</span>
                            <span v-if="scope.row.status==9">订单完成</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="订单状态" v-else>
                        <template slot-scope="scope">
                            <span v-if="scope.row.status==0">待审核</span>
                            <span v-if="scope.row.status==1">待出货</span>
                            <span v-if="scope.row.status==2">待收货</span>
                            <span v-if="scope.row.status==3">部分收货</span>
                            <span v-if="scope.row.status==4">订单完结</span>
                            <span v-if="scope.row.status==5">收货完成</span>
                            <span v-if="scope.row.status==6">订单取消</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="订单编号">
                        <template slot-scope="scope">
                            <el-button @click="get_order_info(scope.row,scope.$index,0)" type="text" size="small">
                                {{scope.row.order_no}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="formInline.type==3" align="center" label="其他平台订单编号" prop="platform_order_no">
                    </el-table-column>
                    <el-table-column align="center" label="出库仓" prop="store_out_name"></el-table-column>
                    <el-table-column align="center" label='入库仓' prop="store_in_name"></el-table-column>
                    <el-table-column align="center" label="入库时间" prop="update_time"></el-table-column>
                    <el-table-column align="center" label="下单时间" prop="create_time"></el-table-column>
                    <el-table-column align="center" label="订单数量（个）" prop="order_num"></el-table-column>
                    <el-table-column align="center" label='订单金额（元）' prop="order_money"></el-table-column>
                    <el-table-column align="center" label='入库数量（个）' prop="totle_num"></el-table-column>
                    <el-table-column align="center" label='入库金额（元）' prop="totle_money"></el-table-column>
                    <el-table-column align="center" label='到货差额（个）'>
                        <template slot-scope="scope">
                            {{scope.row.order_num * 1-scope.row.totle_num * 1}}
                        </template>
                    </el-table-column>
                </el-table>
            </transition>
        </div>
        <!-- 弹框 -->
        <el-dialog :close-on-click-modal="false" title="调拨明细" :visible.sync="detail_dialog">
            <el-table highlight-current-row :data="infolist" v-loading.body="listLoading" border size="small">
                <el-table-column align="center" label='序号' width="50">
                    <template slot-scope="scope">
                        <span class="indexColor">{{scope.$index+1}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="图片" width="70">
                    <template slot-scope="scope">
                        <img :src="scope.row.thumb" width="50" height="50" alt="">
                    </template>
                </el-table-column>
                <el-table-column align="center" label="礼品名称" prop="gift_name"></el-table-column>
                <el-table-column align="center" label="新礼品编号" prop="gift_id"></el-table-column>
                <el-table-column align="center" label="神采礼品编号" prop="no_obsolete"></el-table-column>
                <el-table-column align="center" label="成本价" prop="money_cost"></el-table-column>
                <el-table-column align="center" label="调拨总数量" prop="num_final"></el-table-column>
                <el-table-column align="center" label="调拨总金额" prop="money_totle"></el-table-column>
                <el-table-column v-if="formInline.type==1" align="center" label="到货总额" prop="arrive_money">
                </el-table-column>
                <el-table-column v-if="formInline.type==1" align="center" label="到货数" prop="arrive_num">
                </el-table-column>
            </el-table>
            <!-- 自定义底部 -->
            <div class="bottom_box">
                <p class="pull-right" style="line-height:0">礼品数量合计:{{totalOrder}}　　礼品金额合计:{{totalPrice|keepTwoNum}}</p>
            </div>
        </el-dialog>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="20" layout="prev, pager, next, jumper"
                :total="totalDataNumber">
            </el-pagination>
            <div class="pull-right">
                <span v-if="list" class="mt10"> 调拨单礼品{{formInline.from==2?'出':'入'}}库总数: {{totle_num}}件
                    　调拨单{{formInline.from==2?'出':'入'}}库总金额: {{totle_money|keepTwoNum}}元</span>
                <el-button :disabled="exportForm.length==0" type="primary" size="small" @click="exportClick()" :loading="exportLoading">报表导出<count-down ref="cd"/>
                </el-button>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        getPage,
        storeList,
        houseList,
        getinfoList,
        getExport
    } from "@/api/storage_control/giftAllot_form";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        data() {
            return {
                exportLoading: false,
                type_list: [
                    { id: 1, name: "其他平台调入订单" },
                    { id: 2, name: "神采平台调出订单" }
                ],
                isType1: true,
                totle_money: '',
                totle_num: '',
                houseList: [],
                list: null,
                listLoading: false,
                detail_dialog: false,
                currentPage: 1,
                totalDataNumber: 0,
                detailList: [],
                store_list: null,
                totalOrder: "0",
                totalPrice: "0",
                infolist: [],
                exportForm: [],
                formInline: {
                    start_time: '',
                    end_time: '',
                    store_id: '',
                    order_no: '',
                    house_id: '',
                    type: '1',
                    kua_type: 2,
                    from: '',
                    status: -1,
                    look_del: '0'
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                if (!vm.store_list) {
                    vm.getstore();
                }
            })
        },
        methods: {
            lookDelChange() {
                this.getstore();
            },
            inOutChange() {
                this.formInline.from = (this.formInline.type == "1" || this.formInline.type == "3") ? "" : "1";
                this.searchClick()
            },
            storeChange() {
                this.getHouse();
            },
            getstore() {
                storeList({ look_del: this.formInline.look_del, category_id: 99 }).then(response => {
                    this.store_list = response;
                   let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    }
                    this.getHouse();
                });
            },
            getHouse() {
                houseList({ store_id: this.formInline.store_id, cang: 1 }).then(response => {
                    this.houseList = response;
                    this.formInline.house_id = response[0].house_id;
                });
            },
            // 选择
            handleSelectionChange(val) {
                this.exportForm = val;
            },
            // 导出
            exportClick() {
                if (this.exportForm.length > 20) {
                    this.$message({ type: 'error', message: '由于数据量较大，一次最大只能导出20条' });
                    return;
                }
                const idArr = []
                this.exportForm.forEach(function (val, index) {
                    idArr.push(val.id)
                });
                getExport({ type: 1, order_id: idArr.join(',') })
                this.exportLoading = true;
                this.$refs.cd.countDownF(30).then(() => {
                    this.exportLoading = false;
                });
            },
            // 打开订单详情
            get_order_info(row, index, status) {
                this.detail_dialog = true;
                getinfoList({ order_id: row.order_id, step: 'in' }, this.formInline.type).then(response => {
                    this.infolist = response;
                    this.count();
                });
            },
            // 计算
            count() {
                var totalPrice = 0; //临时总价
                var totalOrder = 0;
                this.infolist.forEach(function (val, index) {
                    totalPrice += val.order_num * 1 * val.money_cost * 1; //累计总价
                    totalOrder += val.order_num * 1;
                });
                this.totalPrice = parseFloat(totalPrice);
                this.totalOrder = parseFloat(totalOrder);
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.start_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                let data = JSON.parse(JSON.stringify(this.formInline))
                if (this.formInline.type == 3) {
                    data.type = data.kua_type;
                }
                this.listLoading = true;
                this.currentPage = 1;
                getPage(data, this.formInline.type).then(response => {
                    this.totalDataNumber = response.page * 20;
                    this.totle_money = response.totle_money
                    this.totle_num = response.totle_num
                    getList(data, 1, this.formInline.type).then(response => {
                        response.forEach(val => {
                            val.order_money = (val.order_money * 1).toFixed(2);
                            val.totle_money = (val.totle_money * 1).toFixed(2);
                        });
                        this.list = response;
                        this.listLoading = false;
                    })
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            handleCurrentChange(val) {
                let data = JSON.parse(JSON.stringify(this.formInline))
                if (this.formInline.type == 3) {
                    data.type = data.kua_type;
                }
                this.listLoading = true;
                getList(data, val, this.formInline.type).then(response => {
                    response.forEach(val => {
                        val.order_money = (val.order_money * 1).toFixed(2);
                        val.totle_money = (val.totle_money * 1).toFixed(2);
                    });
                    this.list = response;
                    this.listLoading = false;
                });
            },
        }
    }
</script>